<template>
  <div :class="prefixCls" class="relative h-[100vh] overflow-hidden">
    <!-- 背景渐变 -->
    <div class="absolute inset-0 bg-gradient-to-br from-blue-600 via-cyan-600 to-indigo-800"></div>
    
    <!-- 动态背景装饰 -->
    <div class="absolute inset-0 opacity-20">
      <div class="absolute top-10 left-10 w-72 h-72 bg-white rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
      <div class="absolute top-10 right-10 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
      <div class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
    </div>

    <div class="relative mx-auto h-full flex items-center justify-center px-4">
      <div
        :class="`${prefixCls}-form`"
        class="relative w-full max-w-6xl bg-white/10 backdrop-blur-lg rounded-2xl shadow-2xl border border-white/20 overflow-hidden"
      >
        <div class="flex min-h-[600px]">
          <!-- 左侧装饰区域 -->
          <div
            :class="`${prefixCls}-form-left`"
            class="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-white/10 to-white/5 p-12 flex-col justify-center items-center relative"
          >
            <div class="text-center space-y-6">
              <div class="flex items-center justify-center mb-8">
                <img
                  alt=""
                  class="h-16 w-16 mr-4"
                  src="@/assets/imgs/logo.svg"
                />
                <span class="text-3xl font-bold text-white">{{ underlineToHump(appStore.getTitle) }}</span>
              </div>
              <img alt="" class="w-80 opacity-90" src="@/assets/svgs/login-box-bg.svg" />
              <div class="text-white/80 text-lg font-medium">
                {{ t('login.welcome') }}
              </div>

            </div>
          </div>
          
          <!-- 右侧表单区域 -->
          <div
            :class="`${prefixCls}-form-right`"
            class="w-full lg:w-1/2 p-8 lg:p-12 flex flex-col"
          >
            <!-- 移动端头部 -->
            <div class="lg:hidden flex items-center justify-center mb-8">
              <img
                alt=""
                class="h-12 w-12 mr-3"
                src="@/assets/imgs/logo.svg"
              />
              <span class="text-2xl font-bold text-white">{{ underlineToHump(appStore.getTitle) }}</span>
            </div>
            
            <!-- 工具栏 -->
            <div class="flex items-center justify-end mb-6 space-x-4">
              <ThemeSwitch />
              <LocaleDropdown class="text-white/80 hover:text-white" />
            </div>
            
            <!-- 表单容器 -->
            <div class="flex-1 flex items-center justify-center">
              <div class="w-full max-w-sm">
                <LoginForm class="w-full" />
                <MobileForm class="w-full" />
                <QrCodeForm class="w-full" />
                <RegisterForm class="w-full" />
                <SSOLoginVue class="w-full" />
                <ForgetPasswordForm class="w-full" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { underlineToHump } from '@/utils'

import { useDesign } from '@/hooks/web/useDesign'
import { useAppStore } from '@/store/modules/app'
import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'

import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue, ForgetPasswordForm } from './components'

defineOptions({ name: 'Login' })

const { t } = useI18n()
const appStore = useAppStore()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('login')
</script>

<style lang="scss" scoped>
$prefix-cls: #{$namespace}-login;

.#{$prefix-cls} {
  overflow: hidden;
}

/* 动画效果 */
@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* 表单容器动画 */
.#{$prefix-cls}-form {
  animation: slideInUp 0.6s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式优化 */
@media (max-width: 1024px) {
  .#{$prefix-cls}-form {
    margin: 1rem;
    max-width: calc(100% - 2rem);
  }
  
  .#{$prefix-cls}-form-left {
    display: none;
  }
  
  .#{$prefix-cls}-form-right {
    width: 100%;
    justify-content: center;
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  .#{$prefix-cls}-form {
    margin: 1rem;
    padding: 1rem;
    min-height: 100vh;
  }
  
  .#{$prefix-cls}-form-right {
    padding: 1rem;
  }
  
  .animate-blob {
    display: none;
  }
}

@media (max-width: 640px) {
  .#{$prefix-cls}-form {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
    min-height: calc(100vh - 1rem);
  }
}

@media (max-width: 480px) {
  .#{$prefix-cls}-form-right {
    padding: 0.5rem;
  }
  
  .#{$prefix-cls}-form {
    border-radius: 12px;
  }
}
</style>

<style lang="scss">
.dark .login-form {
  .el-divider__text {
    background-color: var(--login-bg-color);
  }

  .el-card {
    background-color: var(--login-bg-color);
  }
}
</style>
